<template>
  <div v-loading="loading" >
<!--    <div class="padt5" style="max-width: 800px; overflow-x: scroll">-->
    <div>
<!--      <mu-paper :z-depth="1">-->
        <mu-data-table :columns="headers" :data="list" :fit="true" v-if="$com.isbool(list)">
          <template slot-scope="scope">
            <td align="center" v-for="(item,index) in header" :key="index">
              <div v-if="$com.isbool(config) && $com.isbool(config[item]) && config[item].listType === 'pic'">
                <img @click="()=>{picView = $api.getUrl() + scope.row[item];openDialog = true}" style="max-width: 200px; max-height: 150px;" :src="$api.getUrl() + scope.row[item]" alt="">
              </div>
              <div v-else>{{guessItem(scope.row,item)}}</div>
            </td>
            <td align="center" v-if="multi">
                <mu-flex justify-content="center">
                  <mu-button icon color="primary" @click="remove(scope.$index)">
                    <mu-icon value="close"></mu-icon>
                  </mu-button>
                </mu-flex>
            </td>
          </template>
        </mu-data-table>
<!--      </mu-paper>-->
    </div>
    <!--    隐藏项目-->
    <mu-dialog title="预览" :open.sync="openDialog">
      <img :src="picView" alt="">
      <mu-button slot="actions" flat color="primary" @click="openDialog = false">关闭</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
import api from '@/assets/js/api'
import com from '@/assets/js/com'

export default {
  name: 'entityListViewer',
  props: {
    id: '',
    entityName: '',
    multi: ''
  },
  data () {
    return {
      onload: true,
      // entityName: '',
      title: '轮播图列表',
      loading: true,
      baseUrl: api.getUrl(),
      // 实体信息
      en: '',
      config: [],
      // 数据筛选相关
      search_: '',
      where_: {},
      order_: {id: 'desc'},
      options_: {},
      excel_: false,
      action_: undefined,
      searchBox: [],
      showSearch: false,
      actionBox: [],
      showAction: false,
      excel: false,
      // 列表相关数据
      selects: [],
      header: [],
      headers: [],
      list: [],
      page: {total: 0, limit: 10, page: 1},
      openDialog: false,
      picView: ''
    }
  },
  methods: {
    getList (page) {
      let _this = this
      _this.loading = true
      // 处理分页信息
      if (page !== undefined) {
        _this.page.page = page
      }
      let id = 0
      if (com.isbool(this.id)) {
        id = this.id
      }
      // 处理条件筛选
      let ids = id;
      if (!(id instanceof Array)) {
        ids=[id]
      }
      let idsReal = []
      ids.map(function (data) {
        console.log(typeof data)
        if (typeof data !== 'number') {
          let arr = data.split('/')
          idsReal.push(arr[3])
        }else {
          idsReal.push(data)
        }
      })
      _this.where_ = {
        in:{
          id:idsReal
        }
      }


      let url = '/admin/' + this.entityName + '/search'
      api.post(url, {
        page: _this.page.page,
        _where: _this.where_,
        _order: _this.order_,
        _search: _this.search_
      }, function (res) {
        _this.loading = false
        // 实体名称
        _this.title = res.d.title
        // 实体名称
        _this.en = res.d.en
        // 分页数据
        _this.page = res.d.page
        // 处理表头信息-默认处理也可以自己配置
        _this.header = res.d.header
        let config = res.d.config
        _this.config = res.d.config
        _this.headers = []
        if (_this.headers.length === 0) {
          _this.header.map(function (name) {
            let array = name.split('.')
            name = array[0]
            _this.headers.push({title: config[name].cnName, name: name, width: config[name].width})
          })
          if (_this.multi) {
            _this.headers.push({title: '删除', align: 'center', name: 'edit', width: 180})
          }

        }
        // 对象处理
        res.d.lists.map(function (row) {
          for (let i in row) {
            // 检测时间类型
            var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])T(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d(\+08:00)$/
            var regExp = new RegExp(reg)
            if (regExp.test(row[i])) {
              // alert("时间格式不正确,正确格式为: 2014-01-01 12:00:00 ");
              row[i] = com.str2time(row[i])
            }
            if (row[i] === true || row[i] === false) {
              row[i] = row[i] ? '是' : '否'
            }
          }
        })
        _this.list = res.d.lists
        _this.onload = false
      })
    },
    guessItem (row, itemName) {
      if (com.isbool(itemName)) {
        itemName = itemName.split('.')
        if (typeof itemName === 'string') {
          return row[itemName]
        } else {
          let parent = row
          let value = ''
          for (let i in itemName) {
            // console.log(parent)
            value = parent[itemName[i]]
            parent = parent[itemName[i]]
          }
          return value
        }
      } else {
        return ''
      }
    },
    remove (index) {
      // console.log(index);
      // return
      let data = this.id
      data = arrayDelIndex(data, index)
      this.list = arrayDelIndex(this.list, index)
      this.$emit('change', data)
    }
  },
  created () {
    // this.entityName = this.$route.query.en
  },
  mounted () {
    this.getList()
  },
  watch: {
    id (val1,val2) {
      console.log(val1);
      console.log(val2);
      this.getList()
    }
  }
}

function arrayDelIndex (array, index) {
  var tmp = []
  array.map(function (data, i) {
    if (i !== index) {
      tmp.push(data)
    }
  })
  return tmp;
}
</script>

<style scoped>

</style>
